<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="css/primer.css" rel="stylesheet" />
  <link rel="stylesheet" href="css/basic.css" />
  <style>
    .note {
      width: 1024px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      font-size: large;
      font-weight: bold;
    }

    .Box-row {
      position: relative;
      height: 8vh;
    }

    .From {
      position: absolute;
      left: 0%;
      overflow: hidden;
      display: none;
    }

    .Content {
      position: absolute;
      left: 0%;
      width: 700px;
      overflow: hidden;
    }


    .Reply {
      position: absolute;
      left: 90%;
      overflow: hidden;
    }

    #scoreboard {
      z-index: 5;
      height: 100px;
      position: absolute;
      top: 20px;
      right: -3%;
      color: var(--color-scale-yellow-3);
      text-align: center;
      background-color: rgba(0, 0, 0, 0.826);
      font: bold 50px arial, verdana;
    }
  </style>
  <script src="Js/md5.js"></script>
  <script src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
  <script src="Js/mask.js"></script>
  <title>EZBabyCTF-Notification</title>
</head>

<body>
  <div class="Header" style="background-color: rgba(0, 0, 0, 0.826)">
    <div class="Header-item m-auto">
      <span id="Head">EZBabyCTF通知</span>
    </div>
    <div class="Header-item m-3">
      <span class="Header-link" onclick="toteam()">战队 </span>
    </div>
    <div class="Header-item m-3">
      <span class="Header-link" onclick="returnindex()">返回首页</span>
    </div>
  </div>
  <div class="marsk-container"></div>
  <div class="Box anim-fade-in note" id="noteapp">
    <div class="border rounded-1 color-shadow-medium p-4" id="scoreboard"></div>
    <div class="Box-header">Notifications</div>
    <div class="Box-row">
      <span class="From pophint">发送人</span>
      <span class="Content">内容</span>
      <span class="Reply">回复</span>
    </div>
    <!-- <div class="Box-row">
      <span class="From">m2[0]</span>
      <span class="Content">m2[1]</span>
      <span class="Reply">
        <button class="Box-btn-octicon btn-octicon replybtn" type="button">
          <svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
            <path fill-rule="evenodd"
              d="M1.513 1.96a1.374 1.374 0 011.499-.21l19.335 9.215a1.146 1.146 0 010 2.07L3.012 22.25a1.374 1.374 0 01-1.947-1.46L2.49 12 1.065 3.21a1.374 1.374 0 01.448-1.25zm2.375 10.79l-1.304 8.042L21.031 12 2.584 3.208l1.304 8.042h7.362a.75.75 0 010 1.5H3.888z">
            </path>
          </svg>
        </button></span>
    </div> -->
  </div>

  <div class="popwindow" id="reply">
    <div class="Box Box--overlay d-flex flex-column anim-fade-in fast" style="width: 600px;">
      <div class="Box-header">
        <button class="Box-btn-octicon btn-octicon float-right" type="button" onclick="closesign()">
          <svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16">
            <path fill-rule="evenodd"
              d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z">
            </path>
          </svg>
        </button>
        <h3 class="Box-title">回信</h3>
      </div>
      <div class="Box-row"><strong>请输入您想要回复的消息(如果是来自队长的邀请，请回复"__Yes__"来加入战队)</strong></div>
      <div class="Box-body" style="text-indent :2em;" id="replyhint">The captain of 12345 who named 987 invite you to
        join.</div>
      <div class="Box-footer">
        <input type="text" class="form-control" style="width: 95%; margin: 2vh" id="replyipt" />
        <button type="button" class="btn btn-block" id="sendmsg">确定</button>
      </div>
    </div>
  </div>
  </div>
  <script>
    $(document).ready(function () {
      if ($.cookie("salt") == undefined) {
        window.alert("error 3");
        window.location.href = "index.html";
      }
      else {
        var id = $.cookie("salt").substring(0, 32);
        $.ajax({
          url: "notifications.php",
          type: "GET",
          data: {
            name: id
          },
          async: false,
          dataType: "json",
          success: function (messages) {
            $.each(messages, function (m1, m2) {

              // console.log(m2[0]);
              // console.log(m2[1]);
              $("#noteapp").append('<div class="Box-row"><span class="From">' + m2[0] + '</span><span class="Content">' + m2[1] + '</span><span class="Reply"><button class="Box-btn-octicon btn-octicon replybtn" type="button"><svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill-rule="evenodd"d="M1.513 1.96a1.374 1.374 0 011.499-.21l19.335 9.215a1.146 1.146 0 010 2.07L3.012 22.25a1.374 1.374 0 01-1.947-1.46L2.49 12 1.065 3.21a1.374 1.374 0 01.448-1.25zm2.375 10.79l-1.304 8.042L21.031 12 2.584 3.208l1.304 8.042h7.362a.75.75 0 010 1.5H3.888z"></path></svg></button></span></div>');

            })
          }

        })
        $.ajax({
          url: "person_score.php",
          type: "POST",
          data: {
            id: id
          },
          success: function (socre) {
            $("#scoreboard").text(socre);
          }
        })
        $(".replybtn").click(function () {
          var cont = $(this).parent().parent().find(".Content").text();
          var tosend = $(this).parent().parent().find(".From").text();
          $("#replyhint").text("回复：" + tosend + " : " + cont);
          $("#reply").show();
          $(".marsk-container").show();
          $("#sendmsg").click(function () {
            var msg = "" + $("#replyipt").val();
            if (msg == '' || msg == " ") {
              window.alert("请输入内容!");
            }
            else if (msg == '__Yes__') {
              $.ajax({
                url: "team.php",
                type: "GET",
                async: false,
                dataType: "json",
                data: {
                  id: tosend
                },
                success: function (teaminfo) {
                  var tmname = teaminfo[0];
                  console.log(tmname);
                  $.ajax({
                    url: "acceptinvite.php",
                    type: "GET",
                    async: false,
                    data: {
                      tname: tmname,
                      id: id
                    },
                    success: function (response) {
                      if (response == 'done') {
                        window.alert("您已加入战队!");
                        setTimeout(() => {
                          window.location.href = "team.html";
                        }, 1000);
                      } else {
                        window.alert("出错了!");
                      }
                    },
                    error: function () {
                      window.alert("error:1");
                    }
                  })
                },
                error: function () {
                  window.alert("error:1");
                }

              })
            }
            else {
              $.ajax({
                url: "message.php",
                type: "GET",
                async: false,
                dataType: "text",
                data: {
                  from: id,
                  to: tosend,
                  msg: msg
                },
                success: function (response) {
                  if (response == 'done') {
                    window.alert("消息已发出");
                  } else {
                    window.alert("怪了，出问题了，检查一下");
                  }
                },
                error: function () {
                  window.alert("error:1");
                }
              })
            }
          })
        })

      }

    });
    function returnindex() {
      window.location.href = "index.html";
    }
    function toteam() {
      window.location.href = "teams.html";
    }
  </script>
</body>

</html>